<!DOCTYPE html>
<html>
<head>
    <title>Visual Localizer</title>
</head>
<body>
    <form id="uploadForm">
        <input type="file" id="fileInput" accept="image/*">
        <button type="submit">定位计算</button>
    </form>
    
    <script>
        document.getElementById('uploadForm').addEventListener('submit', async function(e) {
            e.preventDefault();
            
            const file_input = document.getElementById('fileInput');
            const image_file = file_input.files[0];
            
            if (!image_file) {
                alert('请选择文件');
                return;
            }
            
            const form_data = new FormData();
            form_data.append('image', image_file);
            
            try {
                const response = await fetch('http://127.0.0.1:8049/visual/locate', {
                    method: 'POST',
                    body: form_data
                });
                if(response.status === 200) {
                    const rsp_json = await response.json();
                    console.log(rsp_json);
                    alert('平移：' + rsp_json['translation'] + '\n' 
                        + '四元数：' + rsp_json['quaternion'] + '\n'
                        + '重投影误差：' + rsp_json['reprojection_error'] + '\n'
                        + '内点数量：' + rsp_json['inlier_count']
                    )
                } else if(response.status === 503) {
                    alert('服务器繁忙，请稍后再试');
                }
            } catch (error) {
                alert('上传出错: ' + error.message);
            }
        });
    </script>
</body>
</html>